<template>
  <view class="order-detail">
    <!-- 订单基本信息 -->
    <view class="detail-header">
      <image :src="order.avatar" class="course-avatar" mode="aspectFill"></image>
      <view class="detail-info">
        <view class="info-row">
          <text class="label">家长:</text>
          <text>{{ order.name }}</text>
        </view>
        <view class="info-row">
          <text class="label">教师:</text>
          <text>{{ order.teachername }}</text>
        </view>
        <view class="info-row">
          <text class="label">课程:</text>
          <text>{{ order.course }}</text>
        </view>
        <view class="info-row">
          <text class="label">时间:</text>
          <text>{{ order.order_date }}</text>
        </view>
        <view class="info-row">
          <text class="label">薪资:</text>
          <text>￥{{ order.salary }}</text>
        </view>
        <view class="info-row">
          <text class="label">状态:</text>
          <text>{{ getStatusText(order.status) }}</text> <!-- 显示状态 -->
        </view>
      </view>
    </view>

    <!-- 订单描述 -->
    <view class="description-section">
      <text class="section-title">订单内容:</text>
      <text class="order-content">{{ order.content }}</text>
    </view>

    <!-- 动态操作按钮 -->
    <view class="order-actions">
      <button 
        v-if="order.status === '-1' && user.role === 'teacher'" 
        class="confirm-btn" 
        @click="confirmOrder(order.id)">
        确认订单
      </button>

      <button 
        v-if="order.status === '1'" 
        class="cancel-btn" 
        @click="cancelOrder(order.id)">
        结束订单
      </button>

      <button 
        v-if="order.status === '2'" 
        class="delete-btn" 
        @click="delOrder(order.id)">
        删除订单
      </button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      order: {}, // 订单详情数据
      user: {}   // 当前用户信息
    };
  },
  onLoad(options) {
    const orderId = options.orderId;
    this.user = uni.getStorageSync('xm-user');
    this.loadOrderDetail(orderId);
  },
  methods: {
    // 根据订单ID加载订单详情
    loadOrderDetail(orderId) {
      this.$request.get(`/order/selectById?id=${orderId}`).then(res => {
        if (res.code === '200') {
          this.order = res.data;
        } else {
          uni.showToast({ icon: "error", title: res.msg });
        }
      });
    },
    
    // 显示订单状态对应的文本
    getStatusText(status) {
      if (status === '-1' && this.user.role === 'teacher') return '等待教师确认';
      if (status === '0' && this.user.role === 'user') return '等待家长确认';
      if (status === '1') return '正在进行';
      return '已完成';
    },
    
    // 确认订单
    confirmOrder(orderId) {
      uni.showModal({
        title: '确认订单',
        content: '您确定要确认该订单吗？',
        success: (res) => {
          if (res.confirm) {
            this.$request.post(`/order/confirm?orderId=${orderId}`).then(res => {
              if (res.code === '200') {
                uni.showToast({ icon: "success", title: '确认成功' });
                this.loadOrderDetail(orderId);
              } else {
                uni.showToast({ icon: "error", title: res.msg });
              }
            });
          }
        }
      });
    },
    
    // 结束订单
    cancelOrder(orderId) {
      uni.showModal({
        title: '结束订单',
        content: '您确定要结束该订单吗？',
        success: (res) => {
          if (res.confirm) {
            this.$request.post(`/order/cancel?orderId=${orderId}`).then(res => {
              if (res.code === '200') {
                uni.showToast({ icon: "success", title: '订单已结束' });
                this.loadOrderDetail(orderId);
              } else {
                uni.showToast({ icon: "error", title: res.msg });
              }
            });
          }
        }
      });
    },

    // 删除订单
    delOrder(orderId) {
      uni.showModal({
        title: '删除订单',
        content: '删除后无法恢复，您确定要删除该订单吗？',
        success: (res) => {
          if (res.confirm) {
            this.$request.del(`/order/delete/${orderId}`).then(res => {
              if (res.code === '200') {
                uni.showToast({ icon: "success", title: '订单删除成功' });
                uni.navigateBack(); // 返回上一页
              } else {
                uni.showToast({ icon: "error", title: res.msg });
              }
            });
          }
        }
      });
    }
  }
};
</script>

<style scoped>
.order-detail {
  padding: 30rpx;
  background-color: #fff;
  border-radius: 20rpx;
  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.1);
}

.detail-header {
  display: flex;
  align-items: center;
  margin-bottom: 40rpx;
}

.course-avatar {
  width: 150rpx;
  height: 150rpx;
  border-radius: 20rpx;
}

.detail-info {
  flex: 1;
  margin-left: 30rpx;
}

.info-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15rpx;
  font-size: 32rpx;
}

.label {
  color: #333;
  font-weight: 500;
}

.description-section {
  margin-top: 50rpx;
}

.section-title {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 15rpx;
  color: #007bff;
}

.order-content {
  font-size: 32rpx;
  color: #555;
  line-height: 48rpx;
}

.order-actions {
  margin-top: 50rpx;
  display: flex;
  gap: 30rpx;
}

.confirm-btn, .cancel-btn, .delete-btn {
  flex: 1;
  padding: 20rpx;
  text-align: center;
  border-radius: 15rpx;
  color: white;
  font-size: 32rpx;
  box-shadow: 0 8rpx 15rpx rgba(0, 0, 0, 0.2);
}

.confirm-btn {
  background: linear-gradient(45deg, #00b4db, #0083b0);
}

.cancel-btn {
  background: linear-gradient(45deg, #fbc02d, #f57c00);
}

.delete-btn {
  background: linear-gradient(45deg, #ff4d4f, #d32f2f);
}
</style>
